/**
 * EmptyState 空状态组件
 * 统一的空状态展示
 */

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {
  COLORS,
  FONT_SIZE,
  FONT_WEIGHT,
  SPACING,
} from '../../styles/constants';

/**
 * @param {Object} props
 * @param {string} props.icon - 图标名称
 * @param {string} props.title - 主标题
 * @param {string} props.description - 描述文字
 * @param {Object} props.style - 容器样式
 */
export default function EmptyState({
  icon = 'search-outline',
  title = '暂无数据',
  description,
  style,
}) {
  return (
    <View style={[styles.container, style]}>
      {icon && (
        <Icon
          name={icon}
          size={64}
          color={COLORS.text.disabled}
          style={styles.icon}
        />
      )}
      <Text style={styles.title}>{title}</Text>
      {description && <Text style={styles.description}>{description}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: SPACING.xxl,
  },

  icon: {
    marginBottom: SPACING.lg,
    opacity: 0.5,
  },

  title: {
    fontSize: FONT_SIZE.lg,
    color: COLORS.text.primary,
    fontWeight: FONT_WEIGHT.semibold,
    textAlign: 'center',
  },

  description: {
    marginTop: SPACING.sm,
    fontSize: FONT_SIZE.sm,
    color: COLORS.text.quaternary,
    textAlign: 'center',
  },
});
